<template>
  <div class="table-main">
    <el-dialog
      @close="handMyClose"
      :append-to-body="true"
      :close-on-click-modal="false"
      title="商品订单详情"
      :visible.sync="dialogVisible1"
      width="60%"
    >
      <div v-loading="loading2" style="padding-left:20px;padding-right:20px">
        <!-- <div
          style="line-height: 60px;text-align: center; font-width:600;font-weight: bold; font-size: 16px;"
        >
          <el-header>{{form.orderStatus==1?'待发货':(form.orderStatus==2?'配送中':(form.orderStatus==3?'用户确定收获':(form.orderStatus==4?'未付款的订单':'用户拒收')))}}</el-header>
        </div>-->
        <!-- <div class="my_step" style="margin-top:50px;">
          <el-steps :active="active" finish-status="success">
            <el-step title="待付款"></el-step>
            <el-step title="待发货"></el-step>
            <el-step title="配送中"></el-step>
            <el-step title="确认收货"></el-step>
          </el-steps>
        </div>-->
        <!-- <div class="courier_box">
          <div class="cour_top">
            <img class="top_img" src="@/assets/imgs/dingdanguanli.png" alt />
            <div class="top_num">订单单号：{{form.externalNo}}</div>
          </div>
          <div style="text-align: center;" v-if="horsemanObj==null">暂无骑手信息</div>
          <div class="cour_details" v-if="horsemanObj!=null">
            <el-row>
              <el-col :span="12">骑手姓名: {{horsemanObj.realName}}</el-col>
              <el-col :span="12">骑手电话: {{horsemanObj.tel}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">送单次数: {{horsemanObj.singleNum==null?'0':horsemanObj.singleNum}}</el-col>
              <el-col :span="12">内部编号: {{horsemanObj.orderNo}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">成为骑手时间: {{horsemanObj.createTime}}</el-col>
              <el-col :span="12">配送费: {{horsemanObj.realTotalMoney}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">是否送到: {{horsemanObj.isArrive==1?'已送达':'未送达'}}</el-col>
            </el-row>
          </div>
        </div>-->
        <div class="card_box">
          <el-card class="goods_box">
            <div>
              <div class="order_num_box">
                <!-- <el-checkbox @change="handChangeCheck(form)" v-model="form.visible2"></el-checkbox> -->
                <span class="order_num">订单编号：{{form.orderNo==null?'无':form.orderNo}}</span>
                <span class="order_time">下单时间：{{form.createTime}}</span>
              </div>
              <!-- <div class="order_shop_box">
                <div class="shop_title">商家信息:</div>
                <div class="shop_name">{{form.shopName}}</div>
              </div>-->
              <div class="tab_cent" v-if="orderGoodsList.length!=0">
                <el-table border :data="tableData2" style="width: 100%">
                  <el-table-column prop="date" label="商品详情" width="460">
                    <template>
                      <!-- <div v-if="orderGoodsList.length!=0"> -->
                      <div
                        class="goods_details"
                        v-for="goodsItem in orderGoodsList"
                        :key="goodsItem.id"
                      >
                        <img :src="goodsItem.goodImg" class="deta_img" alt />
                        <div class="deta_title_box">
                          <div class="title">{{goodsItem.goods.goodName}}</div>
                          <div class="title_class">
                            <div class="clas_dis">
                              <div class="cla_pic">价格: ￥{{goodsItem.goodPrice}}</div>
                              <div class="pic_num">× {{goodsItem.goodNum}}</div>
                            </div>
                            <div class="clas_dis2">
                              <div style="margin-right:10px">规格:</div>
                              <div class="tag_box_flex cla_pic2">
                                <el-tag>{{goodsItem.goodName}}</el-tag>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- </div> -->
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="订单金额" width="200">
                    <template>
                      <div class="order_monery">
                        <div
                          class="monery_num"
                          style="color: #FA6400;"
                        >实付金额：{{form.payMoeny==null?'0':form.payMoeny}}元</div>
                        <div
                          class="monery_num"
                        >(优惠: {{form.couponMoeny==null?'0':form.couponMoeny}}元)</div>
                        <div
                          class="monery_num"
                        >(含配送费: {{form.deliverMoney==null?'0':form.deliverMoney}}元)</div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="交易状态">
                    <template>{{form.orderStatus==1?'待发货':(form.orderStatus==2?'配送中':(form.orderStatus==3?'用户确定收货':(form.orderStatus==4?'未付款的订单':'用户拒收')))}}</template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="order_shop_box" style="border-top:0;">
                <div class="shop_title">买家信息:</div>
                <div class="shop_name">
                  <span class="buyer_name">收货人：{{form.nickName}}</span>
                  <span class="buyer_name">联系方式：{{form.telPhone==null?'无':form.telPhone}}</span>
                  <span class="buyer_name">收货地址：{{form.address}}</span>
                </div>
              </div>
              <div class="order_shop_box">
                <div class="shop_title">备注信息:</div>
                <div class="shop_name">{{!form.orderRemarks?'无':form.orderRemarks}}</div>
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <span v-if="isShow!=3" slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import imgSize from '@/utils/myUtils'
export default {
  name: 'SidebarLogo',
  components: {},
  watch: {
    isState(newObj) {
      this.isShow = newObj
    },
  },
  props: {
    isState: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      active: 1,
      defaultParams: {
        label: 'title',
        value: 'id',
        children: 'children',
        checkStrictly: true,
      },
      form: {},
      tableData2: [
        {
          id: '1',
        },
      ],
      shopStatusOptions: [],
      isShow: 0,
      imageUrl: '',
      dialogImageUrl: '',
      dialogVisible1: false,
      addressKeyword: '',
      activeName: 'first',
      dialogVisible: false,
      options: [],
      loading2: true,
      orderGoodsList: [],
      horsemanObj: {},
    }
  },
  mounted() {
    // this.$api.getGoodsListl().then(res => {
    //   this.shopStatusOptions = res.data.data
    //   console.log(res, '获取所有的商品')
    // })
  },
  methods: {
    handData(data) {
      console.log(data)
    },
    handGoodsTypeTreeinfo() {},
    handGetShop(id) {
      this.orderGoodsList = []
      this.loading2 = true
      this.$api.getOrderByIdOrder({ id }).then((res) => {
        // res.data.data.createTime
        res.data.data.createTime = new Date(res.data.data.createTime).Format(
          'yy-MM-dd-hh:mm'
        )
        this.form = res.data.data
        this.loading2 = false
        this.orderGoodsList = res.data.data.orderGoods
        console.log(this.orderGoodsList, '?')
        this.active =
          this.form.orderStatus == 1
            ? 2
            : this.form.orderStatus == 2
            ? 3
            : this.form.orderStatus == 3
            ? 4
            : this.form.orderStatus == 4
            ? 1
            : 0
        console.log('查看订单详情', res.data)
        if (this.form.prentId == -1) {
          this.form.prentId = ''
        }
      })
      this.$api.getOrderdetails({ orderid: id }).then((res) => {
        this.horsemanObj = res.data.data
        // if (res.data.data == null) {
        //   this.horsemanObj = {}
        // }
        this.loading2 = false
        console.log('查看订单骑手信息', this.horsemanObj)
      })
    },
    handMyClose() {
      this.dialogVisible1 = false
      // this.$refs.form.resetFields()
      // this.$parent.closeFrom()
    },

    // handSuccess(response, file, fileList) {
    //   console.log(response, file, fileList, '成功回调')
    //   this.form.shopImg = response.message
    // },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url
    //   this.dialogVisible2 = true
    // },
    handleClose() {
      this.dialogVisible1 = false
    },
    handMapShow() {
      this.dialogVisible1 = true
    },
    handleClick() {},
  },
}
</script>

<style lang="scss" scoped>
.cla_pic2 /deep/ .el-tag {
  color: #fff;
  background-color: #38ad93;
}
.goods_details:last-child {
  border-bottom: 0;
}
.goods_details {
  display: flex;
  padding: 30px 0;
  border-bottom: 1px solid #dfe6ec;
  align-items: center;
  .deta_img {
    width: 66px;
    height: 66px;
    min-width: 66px;
    min-height: 66px;
    margin-right: 50px;
    margin-left: 50px;
  }
  .deta_title_box {
    text-align: left;

    .title {
      color: #000000;
      font-size: 14px;
      // white-space: nowrap;
    }
    .title_class {
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      // white-space: nowrap;
      margin-top: 10px;
      .clas_dis {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
      }
      .clas_dis2 {
        margin-top: 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
      .cla_pic {
        color: #38ad93;
        font-size: 14px;
        display: flex;
        align-items: center;
      }
      .pic_num {
        color: #fa6400;
        font-size: 14px;
        margin-left: 30px;
      }
    }
  }
}
.tab_cent /deep/ .cell {
  text-align: center;
  padding-left: 0 !important;
  padding-right: 0;
}
.card_box /deep/ .el-card__body {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.goods_box {
  margin-bottom: 30px;
  .order_shop_box {
    display: flex;
    align-items: center;
    border-top: 1px solid #dfe6ec;
    // border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    .shop_title {
      color: #000000;
      font-size: 14px;
      padding: 13px 30px;
      border-right: 1px solid #dfe6ec;
      white-space: nowrap;
    }
    .shop_name {
      color: #000000;
      padding: 13px 30px;
      font-size: 14px;
    }
  }
  .order_num_box {
    padding: 0 30px;
    margin-bottom: 9px;
    .order_num {
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 17px;
      margin: 0 9px;
    }
    .order_time {
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 17px;
    }
  }
}
.cour_details /deep/ .el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.my_step /deep/ .el-step__title {
  margin-left: -10px;
}
.courier_box {
  margin-top: 60px;
  margin-bottom: 60px;

  .cour_details {
    margin-left: 44px;
  }
  .cour_top {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    .top_img {
      width: 28px;
      height: 28px;
      margin-right: 16px;
    }
    .top_num {
      color: #000000;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.map_btn {
  width: 82px;
  height: 22px;
  background: rgba(56, 173, 147, 1);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  margin-top: 8px;
}
/deep/ .el-form-item__label {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.form_box {
  width: 80%;
  margin: 0 auto;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #38ad93;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #38ad93;
  width: 46px;
  height: 46px;
  line-height: 46px;
  text-align: center;
}
.avatar {
  width: 46px;
  height: 46px;
  display: block;
}
</style>
